<template>
  <view class="coupon-lottery-page">
    <!-- 页面标题 -->
    <view class="page-header">
      <text class="page-title">优惠券抽奖</text>
      <text class="page-subtitle">点击下方按钮抽取优惠券</text>
    </view>

    <!-- 抽奖区域 -->
    <view class="lottery-area">
      <!-- 优惠券展示框 -->
      <view class="coupon-display" :style="{ backgroundColor: currentCoupon?.bgColor || '#f5f5f5' }">
        <view v-if="!isDrawing && !currentCoupon">
          <text class="coupon-placeholder">点击抽奖按钮开始</text>
        </view>
        <view v-else-if="isDrawing" class="drawing-animation">
          <text class="drawing-text">正在抽奖...</text>
        </view>
        <view v-else class="coupon-info">
          <text class="coupon-amount">¥{{ currentCoupon.amount }}</text>
          <text class="coupon-title">{{ currentCoupon.title }}</text>
          <text class="coupon-desc">{{ currentCoupon.desc }}</text>
        </view>
      </view>

      <!-- 抽奖按钮 -->
      <button 
        class="lottery-btn" 
        @click="startLottery" 
        :disabled="isDrawing"
      >
        {{ isDrawing ? '抽奖中...' : '立即抽奖' }}
      </button>

      <!-- 抽奖说明（更新为无次数限制） -->
      <text class="lottery-tip">点击即可抽奖，优惠券自动存入账户</text>
    </view>

    <!-- 我的优惠券入口 -->
    <view class="my-coupon-entry">
      <button class="check-btn" @click="goToAccount">查看我的优惠券</button>
    </view>

    <!-- 抽奖结果弹窗 -->
    <view class="result-modal" v-if="showResult">
      <view class="modal-content">
        <view class="modal-icon" :style="{ color: resultIconColor }">
          {{ resultIcon }}
        </view>
        <view class="modal-title">{{ resultTitle }}</view>
        <view class="modal-desc" v-if="currentCoupon">
          恭喜获得 {{ currentCoupon.amount }} 元优惠券
        </view>
        <button class="modal-btn" @click="closeResult">确定</button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      isDrawing: false,       // 是否正在抽奖
      showResult: false,      // 显示结果弹窗
      currentCoupon: null,    // 当前抽到的优惠券
      resultTitle: '',        // 结果标题
      resultIcon: '',         // 结果图标
      resultIconColor: ''     // 结果图标颜色
      // 移除hasDrawnToday变量，取消每日限制
    };
  },
  onLoad() {
    // 移除每日抽奖检查逻辑
  },
  methods: {
    // 移除checkTodayDrawStatus方法

    // 开始抽奖
    startLottery() {
      if (this.isDrawing) return; // 只检查是否正在抽奖
      
      this.isDrawing = true;
      this.currentCoupon = null;
      
      // 模拟抽奖过程（2秒）
      setTimeout(() => {
        this.finishLottery();
      }, 2000);
    },

    // 完成抽奖
    finishLottery() {
      // 随机生成优惠券（5,10,20元概率可调整）
      const coupons = [5, 10, 20];
      const probabilities = [0.5, 0.3, 0.2]; // 5元50%，10元30%，20元20%
      const amount = this.getRandomCoupon(coupons, probabilities);
      
      // 创建优惠券信息
      this.currentCoupon = {
        amount,
        title: `满${amount * 2}元可用`,
        desc: this.getCouponDesc(amount),
        endDate: this.getEndDate(),
        tag: "未使用",
        bgColor: this.getCouponColor(amount),
        tagColor: "rgba(255,255,255,0.2)",
        id: Date.now() // 使用时间戳确保唯一性
      };
      
      // 保存抽奖记录（保留此逻辑，确保优惠券存入账户）
      this.saveCoupon(this.currentCoupon);
      // 移除本地存储的日期和最后抽奖记录
      
      // 更新状态和弹窗信息
      this.isDrawing = false;
      this.resultTitle = "恭喜您";
      this.resultIcon = "✓";
      this.resultIconColor = "#4CAF50";
      this.showResult = true;
    },

    // 随机获取优惠券（带概率）
    getRandomCoupon(values, probabilities) {
      let sum = 0;
      const rand = Math.random();
      
      for (let i = 0; i < probabilities.length; i++) {
        sum += probabilities[i];
        if (rand <= sum) {
          return values[i];
        }
      }
      return values[0];
    },

    // 保存优惠券到本地
    saveCoupon(coupon) {
      let myCoupons = uni.getStorageSync('myCoupons') || [];
      myCoupons.push(coupon);
      uni.setStorageSync('myCoupons', myCoupons);
    },

    // 关闭结果弹窗
    closeResult() {
      this.showResult = false;
    },

    // 前往账户页面
    goToAccount() {
      uni.navigateTo({
        url: "/pages/discount/account"
      });
    },

    // 获取优惠券描述
    getCouponDesc(amount) {
      const descs = {
        5: "无门槛全场通用",
        10: "鲜花品类专享",
        20: "新用户首单立减"
      };
      return descs[amount];
    },

    // 获取有效期（30天）
    getEndDate() {
      const date = new Date();
      date.setDate(date.getDate() + 30);
      return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')}`;
    },

    // 获取优惠券颜色
    getCouponColor(amount) {
      const colors = {
        5: "linear-gradient(90deg, #FF7A45, #FF5252)",
        10: "linear-gradient(90deg, #42A5F5, #2196F3)",
        20: "linear-gradient(90deg, #66BB6A, #4CAF50)"
      };
      return colors[amount];
    }
  }
};
</script>

<style scoped>
/* 样式保持不变 */
.coupon-lottery-page {
  padding: 30rpx 20rpx;
  background-color: #f5f5f5;
  min-height: 93vh;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.page-header {
  text-align: center;
  margin: 40rpx 0 60rpx;
}

.page-title {
  font-size: 48rpx;
  font-weight: bold;
  color: #333;
  display: block;
  margin-bottom: 15rpx;
}

.page-subtitle {
  font-size: 28rpx;
  color: #666;
}

/* 抽奖区域 */
.lottery-area {
  width: 100%;
  max-width: 600rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 80rpx;
}

/* 优惠券展示框 */
.coupon-display {
  width: 100%;
  height: 240rpx;
  border-radius: 20rpx;
  margin-bottom: 40rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
}

.coupon-placeholder {
  color: #999;
  font-size: 30rpx;
}

.coupon-info {
  text-align: center;
  color: #fff;
  padding: 20rpx;
}

.coupon-amount {
  font-size: 60rpx;
  font-weight: bold;
  display: block;
  margin-bottom: 10rpx;
}

.coupon-title {
  font-size: 32rpx;
  display: block;
  margin-bottom: 8rpx;
}

.coupon-desc {
  font-size: 24rpx;
  opacity: 0.9;
}

/* 抽奖动画 */
.drawing-animation {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.drawing-text {
  color: #666;
  font-size: 30rpx;
  margin-bottom: 20rpx;
}

/* 抽奖按钮 */
.lottery-btn {
  width: 80%;
  height: 90rpx;
  line-height: 90rpx;
  background-color: #FF6B6B;
  color: #fff;
  border-radius: 45rpx;
  font-size: 34rpx;
  font-weight: 500;
  border: none;
  margin-bottom: 20rpx;
}

.lottery-btn:disabled {
  background-color: #ccc;
  color: #999;
}

.lottery-tip {
  font-size: 24rpx;
  color: #999;
  text-align: center;
  line-height: 1.5;
}

/* 我的优惠券入口 */
.my-coupon-entry {
  width: 100%;
  padding: 0 40rpx;
  margin-top: auto;
  margin-bottom: 60rpx;
}

.check-btn {
  width: 100%;
  height: 80rpx;
  line-height: 80rpx;
  background-color: #fff;
  color: #FF6B6B;
  border: 2rpx solid #FF6B6B;
  border-radius: 40rpx;
  font-size: 30rpx;
}

/* 结果弹窗 */
.result-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 100;
}

.modal-content {
  width: 500rpx;
  background-color: #fff;
  border-radius: 24rpx;
  padding: 50rpx 30rpx;
  text-align: center;
}

.modal-icon {
  font-size: 80rpx;
  margin-bottom: 30rpx;
}

.modal-title {
  font-size: 36rpx;
  font-weight: bold;
  margin-bottom: 20rpx;
  color: #333;
}

.modal-desc {
  font-size: 28rpx;
  color: #666;
  margin-bottom: 40rpx;
}

.modal-btn {
  width: 100%;
  height: 70rpx;
  background-color: #FF6B6B;
  color: #fff;
  border-radius: 35rpx;
  font-size: 28rpx;
  border: none;
}
</style>